<template>
  <el-dialog
    v-model="dialogVisible"
    :title="title"
    v-bind="$attrs"
    @close="handleClose"
  >
    <slot></slot>
  </el-dialog>
</template>

<script setup lang="ts">
// const visible = ref(false);
import { watch, useAttrs, computed } from 'vue';

const $emits = defineEmits(['close', 'update:visible']);

const $attrs = useAttrs();

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  visible: {
    type: Boolean,
    default: false
  }
});

const dialogVisible = computed({
  get: () => props.visible,
  set: (val) => {
    $emits('update:visible', val);
  }
});

watch(
  () => props.visible,
  (val) => {
    if (val) {
      $emits('update:visible', true);
    }
  }
);

const handleClose = () => {
  $emits('close');
  $emits('update:visible', false);
};
</script>

<style scoped></style>
